import type { Component } from 'vue'
import type { FormRules } from 'element-plus'

/**
 * 表单字段类型枚举
 */
export type FormFieldType =
  | 'input'
  | 'textarea'
  | 'select'
  | 'radio'
  | 'checkbox'
  | 'date'
  | 'datetime'
  | 'number'
  | 'password'
  | 'image-uploader'
  | 'switch'
  | 'slider'
  | 'rate'
  | 'color-picker'
  | 'time'
  | 'time-select'

/**
 * 表单字段选项接口
 */
export interface FormFieldOption {
  /** 选项标签 */
  label: string
  /** 选项值 */
  value: string | number | boolean
  /** 是否禁用 */
  disabled?: boolean
}

/**
 * 图片上传配置接口
 */
export interface ImageUploadConfig {
  /** 上传地址 */
  action?: string
  /** 上传文件名 */
  name?: string
  /** 上传时附带的额外参数 */
  data?: Record<string, string | number | boolean>
  /** 允许的文件类型 */
  allowedTypes?: string[]
  /** 最大文件大小(MB) */
  maxSize?: number
  /** 预览配置 */
  preview?: {
    width?: number
    height?: number
    borderRadius?: string
  }
}

/**
 * 表单字段配置接口
 */
export interface FormFieldConfig {
  /** 字段名称 */
  prop: string
  /** 字段标签 */
  label: string
  /** 字段类型 */
  type: FormFieldType
  /** 默认值 */
  defaultValue?: string | number | boolean | string[] | number[]
  /** 占位符 */
  placeholder?: string
  /** 输入框类型（如 text、password 等，仅当 type 为 input/textarea 时有意义） */
  inputType?: string
  /** 是否必填 */
  required?: boolean
  /** 是否禁用 */
  disabled?: boolean
  /** 是否只读 */
  readonly?: boolean
  /** 字段宽度 */
  width?: string
  /** 最大长度 */
  maxlength?: number
  /** 是否显示字数统计 */
  showWordLimit?: boolean
  /** 是否显示密码切换（仅当 inputType 为 password 时有效） */
  showPassword?: boolean
  /** 选项列表(用于 select、radio、checkbox) */
  options?: FormFieldOption[]
  /** 图片上传配置 */
  uploadConfig?: ImageUploadConfig
  /** 自定义属性 */
  attrs?: Record<string, string | number | boolean>
  /** 自定义样式 */
  style?: Record<string, string | number>
  /** 自定义类名 */
  class?: string
  /** 字段提示信息 */
  tip?: string
  /** 字段描述 */
  description?: string
  /** 是否在一行显示 */
  inline?: boolean
  /** 栅格布局配置 */
  col?: {
    span?: number
    offset?: number
    push?: number
    pull?: number
  }
}

/**
 * 表单配置接口
 */
export interface FormConfig {
  /** 表单字段配置列表 */
  fields: FormFieldConfig[]
  /** 表单验证规则 */
  rules?: FormRules
  /** 表单标签宽度 */
  labelWidth?: string
  /** 表单标签位置 */
  labelPosition?: 'left' | 'right' | 'top'
  /** 表单尺寸 */
  size?: 'large' | 'default' | 'small'
  /** 是否禁用整个表单 */
  disabled?: boolean
  /** 是否内联表单 */
  inline?: boolean
  /** 表单栅格间距 */
  gutter?: number
}

/**
 * CrudFormDialog 组件的 Props 接口
 */
export interface CrudFormDialogProps {
  /** 对话框显示状态 */
  visible: boolean

  /** 对话框标题 */
  title?: string

  /** 对话框宽度 */
  width?: string

  /** 表单数据 */
  modelValue: Record<string, string | number | boolean | string[] | number[] | File | null>

  /** 表单配置 */
  formConfig: FormConfig

  /** 提交按钮加载状态 */
  loading?: boolean

  /** 提交按钮文案 */
  confirmText?: string

  /** 取消按钮文案 */
  cancelText?: string

  /** 是否在关闭前确认 */
  beforeClose?: boolean

  /** 是否显示重置按钮 */
  showReset?: boolean

  /** 重置按钮文案 */
  resetText?: string

  /** 是否全屏显示 */
  fullscreen?: boolean

  /** 是否可拖拽 */
  draggable?: boolean

  /** 对话框自定义类名 */
  customClass?: string

  /** 是否在提交成功后自动关闭 */
  autoClose?: boolean
}

/**
 * CrudFormDialog 组件的 Events 接口
 */
export interface CrudFormDialogEvents {
  /** 更新显示状态 */
  'update:visible': [visible: boolean]

  /** 更新表单数据 */
  'update:modelValue': [value: Record<string, string | number | boolean | string[] | number[] | File | null>]

  /** 提交表单 */
  'submit': [formData: Record<string, string | number | boolean | string[] | number[] | File | null>]

  /** 取消操作 */
  'cancel': []

  /** 重置表单 */
  'reset': []

  /** 表单验证失败 */
  'validate-error': [errors: Record<string, string[]>]

  /** 字段值变化 */
  'field-change': [prop: string, value: string | number | boolean | string[] | number[] | File | null]

  /** 对话框打开 */
  'open': []

  /** 对话框关闭 */
  'close': []
}

/**
 * 表单字段组件映射接口
 */
export interface FormFieldComponentMap {
  [key: string]: Component
}

/**
 * 表单验证结果接口
 */
export interface FormValidateResult {
  /** 是否验证通过 */
  valid: boolean
  /** 验证错误信息 */
  errors?: Record<string, string[]>
}

/**
 * 表单字段渲染配置接口
 */
export interface FormFieldRenderConfig {
  /** 字段配置 */
  field: FormFieldConfig
  /** 字段值 */
  value: string | number | boolean | string[] | number[] | File | null
  /** 更新字段值的方法 */
  onChange: (value: string | number | boolean | string[] | number[] | File | null) => void
  /** 是否禁用 */
  disabled?: boolean
}
